<template>
    <div class="body" v-if="JSON.stringify(indexData) != '{}'">
        <div class="jn_top">
            <!-- 轮播 -->
            <div class="j_swiper">
                <div class="swiper-container swiper1" v-if="isSwiper">
                    <div class="swiper-wrapper">
                        <div
                            class="swiper-slide"
                            v-for="(item, index) in indexData.ad_list"
                            :key="index"
                        >
                            <img :src="item.ad_code" alt="" />
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>

            <!--每日福利-start-->
            <div class="j_title">
                <span>每日福利</span>
                <!-- <a >更多</a> -->
            </div>
            <div class="j_fuli">
                <dl>
                    <dd>
                        <h1>精选推荐</h1>
                        <h2>热销爆款</h2>
                    </dd>
                    <dt>
                        <img
                            src="../../assets/newimg/index/sc_img_2.png"
                            alt=""
                        />
                    </dt>
                </dl>
                <dl>
                    <dd>
                        <h1>大牌优选</h1>
                        <h2>军属福利专享</h2>
                    </dd>
                    <dt>
                        <img
                            src="../../assets/newimg/index/sc_img_1.png"
                            alt=""
                        />
                    </dt>
                </dl>
            </div>
            <!--每日福利-end-->

            <!--推荐商品-start-->
            <div class="j_title">
                <span
                    >爆款推荐<img
                        src="../../assets/newimg/index/home_icon_huo@2x.png"
                        alt=""
                /></span>
                <!-- <a >更多</a> -->
            </div>
            <div class="" v-if="indexData.goods.goods_list.length > 0">
                <div class="f-recommend">
                    <ul>
                        <li
                            v-for="(item, index) in indexData.goods.goods_list"
                            :key="index"
                            @click="
                                $router.push({
                                    path: '/shopDetail',
                                    query: { id: item.goods_id },
                                })
                            "
                        >
                            <a>
                                <div class="j_bktj_img">
                                    <img
                                        :src="item.original_img"
                                        :alt="item.goods_name"
                                    />
                                </div>
                                <div class="fr-pdetail">
                                    <p class="frp-title">
                                        {{ item.goods_name }}
                                    </p>
                                    <span
                                        class="frp-label"
                                        v-show="item.label_id"
                                        >{{ item.label_id }}</span
                                    >
                                    <div class="frp-price">
                                        <span class="ro-sm"
                                            >￥{{ item.shop_price }}</span
                                        >
                                    </div>
                                    <div class="wo-msg">
                                        <span
                                            >{{
                                                item.comment_count
                                            }}条评价</span
                                        >
                                        <img
                                            src="../../assets/newimg/index/hone_icon_gwci@2x.png"
                                            alt=""
                                        />
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 缺省页面 -->
            <component
                :is="'ContentNone'"
                v-if="
                    indexData.goods.goods_list.length == 0 && pageInfo.pageSatus
                "
            ></component>
            <!--推荐商品-end-->
            <!-- 分页 -->
            <component
                :is="'Pagination'"
                :pageInfo="pageInfo"
                @pageNext="pageNext"
                @changePageStatus="changePageStatus"
            ></component>
            <div class="zhanwei"></div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { Toast } from 'vant';
import { axiosPost } from '../../axios';
import Swiper, { Autoplay, Pagination } from 'swiper';
Swiper.use([Autoplay, Pagination]);
import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.less';
export default {
    name: '',
    computed: {
        ...mapState({
            searchVal: (state) => state.searchVal,
            searchStatus: (state) => state.searchStatus,
        }),
    },
    data() {
        return {
            indexData: {
                goods: { goods_list: [] },
            },
            isSwiper: false,

            // 分页组件信息
            pageInfo: {
                pagingText: '',
                pageNum: 1,
                pageSatus: true,
            },
        };
    },
    mounted() {
        this.getIndexdata();
    },
    watch: {
        // 监听搜索按钮点击
        searchStatus(val) {
            if (val.split('%')[0] == 'false' || this.searchVal) {
                this.indexData.goods.goods_list = [];
                this.pageInfo.pageSatus = false;
                this.getIndexdata();
            }
        },
    },
    methods: {
        ...mapMutations(['changeHeadData']),
        // 分页组件修改状态
        changePageStatus(data) {
            this.pageInfo.pageSatus = data;
        },
        // 分页组件回调
        pageNext(data) {
            this.pageInfo.pageNum = data;
            this.getIndexdata(data); // 根据type获取订单
        },
        callback() {},
        initSeiper() {
            new Swiper('.swiper1', {
                pagination: {
                    el: '.swiper-pagination',
                },
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop: true,
                on: {
                    navigationShow: function () {
                        // console.log('按钮显示了');
                    },
                },
            });
        },
        // 获取首页数据
        getIndexdata(page = 1, page_size = 10) {
            axiosPost(
                'api/index/home',
                {
                    page,
                    page_size,
                    q: this.searchVal,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    if (!this.isSwiper) {
                        this.indexData.ad_list = res.data.ad_list;
                        this.isSwiper = true;
                        this.$nextTick(() => {
                            this.initSeiper();
                        });
                        this.changeHeadData({
                            city: res.data.head.location.city
                                ? res.data.head.location.city
                                : '定位中',
                            messageNum: res.data.message_count,
                        });
                    }

                    // 分页处理
                    if (
                        res.data.goods.page.current_page ==
                        res.data.goods.page.total_page
                    ) {
                        this.pageInfo.pagingText = '没有更多啦！';
                    } else {
                        this.pageInfo.pagingText = '商品加载中...';
                    }
                    this.pageInfo.pageSatus = true;

                    // 数据处理
                    res.data.goods.goods_list.forEach((element) => {
                        this.indexData.goods.goods_list.push(element);
                    });
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
@import url('../../assets/css/index.css');

// body {
//     background: rgb(90, 71, 71);
// }

/* 每日福利new */
.j_fuli {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.4267rem auto 0.64rem;

    dl:nth-child(1) {
        background: url('../../assets/newimg/index/sc_img_bj_h.png') center
            center no-repeat;
        background-size: 100% 100%;
    }
    dl:nth-child(2) {
        background: url('../../assets/newimg/index/sc_img_bj_L.png') center
            center no-repeat;
        background-size: 100% 100%;
        margin-left: 0.64rem;
    }
    dl {
        width: 7.2533rem;
        height: 3.4133rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        dd {
            margin-left: 0.5547rem;
            h1 {
                font-size: 0.5973rem;
                font-weight: 600;
                color: #ff3b3b;
            }

            h2 {
                font-size: 0.512rem;
                font-weight: 400;
                color: #888888;
                margin-top: 0.256rem;
            }
        }

        dt {
            margin-right: 0.3413rem;
            img {
                width: 2.88rem;
            }
        }
    }
}

.jn_top {
    height: 3.4133rem;
    background: #ff3b3b;

    .swiper-pagination-bullet {
        width: 0.1707rem;
        height: 0.1707rem;
        display: inline-block;
        border-radius: 0.0853rem;
        background: #e1dfe0;
        opacity: 1;
    }

    .j_swiper {
        height: 6.4rem;
        width: 15.1467rem;
        margin: 0 auto;
        border-radius: 0.4267rem;
        overflow: hidden;

        .swiper-pagination-bullet-active {
            width: 0.3413rem;
            background: #ff3b3b;
        }

        .swiper-container {
            height: 100%;

            .swiper-wrapper {
                height: 100%;
            }

            .swiper-slide {
                width: 15.1467rem;
                height: 6.4rem;
                overflow: hidden;
                border-radius: 0.4267rem;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 6.4rem;
                }
            }
        }
    }

    .dhbox {
        .dh {
            width: 15.1467rem;
            height: 6.6987rem;
            background: #ffffff;
            border-radius: 0.4267rem;
            margin: 0.512rem auto 0;
        }

        .dh a {
            display: block;
            float: left;
            width: 25%;
            text-align: center;
            margin: 0.384rem 0 0.3rem;
            color: #000000;
            position: relative;
        }

        .dh a span span {
            vertical-align: sub; /*font-size:.59733rem;*/
            font-size: 0.512rem;
            position: relative;
            top: 0.3rem;
            left: 0;
            bottom: 0;
            right: 0;
            color: #999999;
        }

        .dh a span img {
            width: 2.005333333333333rem;
        }
    }
}
</style>
